<html>
<head>
    <title>无限极分类</title>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <link rel='stylesheet' href='../Run/base.css'>
    <link rel='stylesheet' href='css/InfiniteClassification.css'>
    <script src='../SmallJs/SmallJs.js'></script>
</head>
<body>
<!-- 无限极分类 -->
<div class='container'>

    <!-- 无限极分类 -->
    <div class='infinite-classification'>
        <div class="list">

            <div class="item" data-id="30">
                <div class="function">
                    <div class="icon">
                        <span class="text hide"></span>
                        <img src="image/default/test.png" class="image">
                    </div>
                    <div class="explain">
                        <div class="in">
                            <div class="ico"><img src="image/default/ring.png" class="image"></div>
                            <div class="text">控制面板</div>
                        </div>
                    </div>
                    <div class="flag hide">
                        <div class="new">新的</div>
                        <div class="number">10</div>
                        <div class="switch"><img src="image/default/spread.png" class="image"></div>
                    </div>
                </div>

                <div class="child">
                    <div class="list"></div>
                </div>
            </div>

            <div class="item" data-id="1">
                <div class="function">
                    <div class="icon">
                        <img src="image/default/test.png" class="image">
                    </div>
                    <div class="explain">
                        <div class="in">
                            <div class="ico"><img src="image/default/ring.png" class="image"></div>
                            <div class="text">用户管理</div>
                        </div>
                    </div>
                    <div class="flag hide">
                        <div class="new">新的</div>
                        <div class="number">10</div>
                        <div class="switch"><img src="image/default/spread.png" class="image"></div>
                    </div>
                </div>

                <div class="child">
                    <div class="list">

                        <div class="item" data-id="2">
                            <div class="function">
                                <div class="icon">
                                    <span class="text">你</span>
                                    <img src="image/default/test.png" class="image">
                                </div>
                                <div class="explain">
                                    <div class="in">
                                        <div class="ico"><img src="image/default/ring.png" class="image"></div>
                                        <div class="text">用户列表</div>
                                    </div>
                                </div>
                                <div class="flag hide">
                                    <div class="new">新的</div>
                                    <div class="number">10</div>
                                    <div class="switch"><img src="image/default/spread.png" class="image"></div>
                                </div>
                            </div>

                            <div class="child">
                                <div class="list">

                                    <div class="item" data-id="4">
                                        <div class="function">
                                            <div class="icon"><img src="image/default/test.png" class="image"></div>
                                            <div class="explain">
                                                <div class="in">
                                                    <div class="ico"><img src="image/default/ring.png" class="image"></div>
                                                    <div class="text">编辑用户</div>
                                                </div>
                                            </div>
                                            <div class="flag hide">
                                                <div class="new">新的</div>
                                                <div class="number">10</div>
                                                <div class="switch"><img src="image/default/spread.png" class="image"></div>
                                            </div>
                                        </div>

                                        <div class="child">
                                            <div class="list"></div>
                                        </div>
                                    </div>

                                    <div class="item" data-id="5">
                                        <div class="function">
                                            <div class="icon"><img src="image/default/test.png" class="image"></div>
                                            <div class="explain">
                                                <div class="in">
                                                    <div class="ico"><img src="image/default/ring.png" class="image"></div>
                                                    <div class="text">添加用户</div>
                                                </div>
                                            </div>
                                            <div class="flag hide">
                                                <div class="new">新的</div>
                                                <div class="number">10</div>
                                                <div class="switch"><img src="image/default/spread.png" class="image"></div>
                                            </div>
                                        </div>

                                        <div class="child">
                                            <div class="list"></div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="item" data-id="3">
                            <div class="function">
                                <div class="icon"><img src="image/default/test.png" class="image"></div>
                                <div class="explain">
                                    <div class="in">
                                        <div class="ico"><img src="image/default/ring.png" class="image"></div>
                                        <div class="text">评论列表</div>
                                    </div>
                                </div>
                                <div class="flag hide">
                                    <div class="new">新的</div>
                                    <div class="number">10</div>
                                    <div class="switch"><img src="image/default/spread.png" class="image"></div>
                                </div>
                            </div>

                            <div class="child">
                                <div class="list"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="item" data-id="10">
                <div class="function">
                    <div class="icon"><img src="image/default/test.png" class="image"></div>
                    <div class="explain">
                        <div class="in">
                            <div class="ico"><img src="image/default/ring.png" class="image"></div>
                            <div class="text">系统管理</div>
                        </div>
                    </div>
                    <div class="flag hide">
                        <div class="new">新的</div>
                        <div class="number">10</div>
                        <div class="switch"><img src="image/default/spread.png" class="image"></div>
                    </div>
                </div>

                <div class="child">
                    <div class="list">

                        <div class="item" data-id="11">
                            <div class="function">
                                <div class="icon"><img src="image/default/test.png" class="image"></div>
                                <div class="explain">
                                    <div class="in">
                                        <div class="ico"><img src="image/default/ring.png" class="image"></div>
                                        <div class="text">分类管理</div>
                                    </div>
                                </div>
                                <div class="flag hide">
                                    <div class="new">新的</div>
                                    <div class="number">10</div>
                                    <div class="switch"><img src="image/default/spread.png" class="image"></div>
                                </div>
                            </div>

                            <div class="child">
                                <div class="list">

                                    <div class="item" data-id="12">
                                        <div class="function">
                                            <div class="icon"><img src="image/default/test.png" class="image"></div>
                                            <div class="explain">
                                                <div class="in">
                                                    <div class="ico"><img src="image/default/ring.png" class="image"></div>
                                                    <div class="text">分类列表</div>
                                                </div>
                                            </div>
                                            <div class="flag hide">
                                                <div class="new">新的</div>
                                                <div class="number">10</div>
                                                <div class="switch"><img src="image/default/spread.png" class="image"></div>
                                            </div>
                                        </div>

                                        <div class="child">
                                            <div class="list"></div>
                                        </div>
                                    </div>

                                    <div class="item" data-id="13">
                                        <div class="function">
                                            <div class="icon"><img src="image/default/test.png" class="image"></div>
                                            <div class="explain">
                                                <div class="in">
                                                    <div class="ico"><img src="image/default/ring.png" class="image"></div>
                                                    <div class="text">分类结构</div>
                                                </div>
                                            </div>
                                            <div class="flag hide">
                                                <div class="new">新的</div>
                                                <div class="number">10</div>
                                                <div class="switch"><img src="image/default/spread.png" class="image"></div>
                                            </div>
                                        </div>

                                        <div class="child">
                                            <div class="list"></div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="item" data-id="14">
                            <div class="function">
                                <div class="icon"><img src="image/default/test.png" class="image"></div>
                                <div class="explain">
                                    <div class="in">
                                        <div class="ico"><img src="image/default/ring.png" class="image"></div>
                                        <div class="text">主体管理</div>
                                    </div>
                                </div>
                                <div class="flag hide">
                                    <div class="new">新的</div>
                                    <div class="number">10</div>
                                    <div class="switch"><img src="image/default/spread.png" class="image"></div>
                                </div>
                            </div>

                            <div class="child">
                                <div class="list"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>


</div>

<script src='js/InfiniteClassification.js'></script>
<script>

    var con = G('.container');

    var ic = new InfiniteClassification(con.get(0) , {
        // 菜单展开动画过渡时间
        time: 300 ,
        // 次要的图标类型，new || number || switch
        icon: 'switch' ,
        // 标识符，展开的项；1. 在元素里面设置 data-focus='y' +
        id: [1] ,
        // 初始状态，spread || shrink
        status: 'shrink' ,
        // 层级视觉显示效果
        amount: 12 ,
        // 同层级是否互斥
        exclution: false ,
        // 展开回调
        spread: function(id){
            console.log('spread:' + id);
        } ,
        // 收缩回调
        shrink: function(id){
            console.log('shrink:' + id);
        } ,
        // 项点击回调函数
        click: function(id){
            console.log('click:' + id);
        } ,
        // 是否菜单也可被选中
        menuFocus: false ,
        // 点击项后是否选中
        focus: true ,
        // 是否选中顶级菜单
        topFocus: false ,
        parent: function(id){
            console.log('我是父级项：' , id);
        } ,
        child: function(id){
            console.log('我是子级项：' , id);
        } ,
    });

    ic.icon('text');

</script>
</body>
</html>